<script setup>
  import { ref } from 'vue'

  // 是否验证码倒计时
  const isShowCode = ref(false)

  //点击获取验证码
  const mobileform = ref(null)
  function onshowCodefn() {
    mobileform.value.validateField('mobile', async (err) => {
      if (err) {
        return uni.showToast({
          title: '请输入正确的手机号',
          icon: 'error',
          mask: true,
        })
      }
      const { data } = await codeApi({
        type: 'login',
        mobile: mobAndPasList.value.mobile,
      })

      if (data.code === 10000) {
        isShowCode.value = true
        uni.showToast({
          title: '验证码已发送，请注意查收',
          icon: 'success',
          mask: true,
        })
      } else {
        uni.utils.toast(data.message)
      }
    })
  }

  // 倒计时结束事件
  const codeTitle = ref('获取验证码')
  function countDownOutfn() {
    isShowCode.value = false
    codeTitle.value = '再次获取验证码'
  }

  // 表单数据和规则
  import {
    mobAndPasList,
    mobAndPasRules,
    isAgreement,
  } from './mobAndPassData.js'

  //失去焦点时校验
  function mobilecheckfn() {
    mobileform.value.validateField('mobile')
  }
  function codecheckfn() {
    mobileform.value.validateField('code')
  }

  // 点击登录
  import { codeApi, mobileLoginApi } from '@/server/user.js'
  import { useloginStore } from '@/store/user.js'
  function submitMobile() {
    if (!isAgreement.value) return uni.utils.toast('请勾选用户协议！')

    mobileform.value.validate(async (err) => {
      // 校验不通过就返回
      if (err) {
        return uni.showToast({
          title: '请输入正确的手机号和密码',
          icon: 'error',
          mask: true,
        })
      }

      // 校验通过存储token
      const { data } = await mobileLoginApi({
        mobile: mobAndPasList.value.mobile,
        code: mobAndPasList.value.code,
      })

      console.log(data.data)
      useloginStore().token = data.data.token
      useloginStore().refreshToken = data.data.refreshToken
      useloginStore().userId = data.data.id

      // 跳转
      const reductUrl = useloginStore().redictUrl
      const openType = useloginStore().openType

      uni[openType]({
        url: '/' + reductUrl,
      })
    })
  }
</script>

<template>
  <uni-forms
    class="login-form"
    ref="mobileform"
    v-bind:model-value="mobAndPasList"
    v-bind:rules="mobAndPasRules"
  >
    <uni-forms-item name="mobile" class="mobileinp">
      <uni-easyinput
        :input-border="false"
        :clearable="false"
        placeholder="请输入手机号"
        v-model="mobAndPasList.mobile"
        placeholder-style="color: #C3C3C5"
        v-on:blur="mobilecheckfn"
      />
    </uni-forms-item>
    <uni-forms-item name="code">
      <uni-easyinput
        :input-border="false"
        :clearable="false"
        placeholder="请输入验证码"
        v-model="mobAndPasList.code"
        placeholder-style="color: #C3C3C5"
        @blur="codecheckfn"
      />

      <uni-countdown
        :showDay="false"
        :showHour="false"
        :showMinute="false"
        color="#16c2a3"
        :second="10"
        v-if="isShowCode"
        v-on:timeup="countDownOutfn"
      ></uni-countdown>
      <text v-else class="text-button" v-on:click="onshowCodefn">{{
        codeTitle
      }}</text>
    </uni-forms-item>

    <view class="agreement">
      <radio
        :checked="isAgreement"
        @click="isAgreement = !isAgreement"
        color="#16C2A3"
      />
      我已同意
      <text class="link">用户协议</text>
      及
      <text class="link">隐私协议</text>
    </view>

    <button class="uni-button" @click="submitMobile">登 录</button>
  </uni-forms>
</template>

<script>
  export default {
    options: {
      styleIsolation: 'shared',
    },
  }
</script>

<style lang="scss">
  @import './styles.scss';
</style>
